<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
    <style type="text/css">
      div{border: solid 1px black;margin: 10px;padding: 10px;}
    </style>
	</head>
	<body>
    <div id="app">
      <h1>{{title}}</h1>
      <Child></Child>
    </div>
	</body>
  <script src="../vue.js"></script>
  
  <template id="kx">
    <div>
      <h2>{{title}}</h2>
      <Child1></Child1>
      <Child2></Child2>
    </div>
  </template>
  
  <template id="yz">
    <div>
      <h2>{{title}}</h2>
      <Child></Child>
    </div>
  </template>
  
  <template id="ql">
    <div>
      <h2>{{title}}</h2>
    </div>
  </template>
  
  <template id="yx">
    <div>
      <h2>{{title}}</h2>
    </div>
  </template>
  
  <script>
    
    // 组件的嵌套:
    //   1. 谁注册,谁使用
    //   2. 注册之前,一定要先定义
    //   3. 组件实例内部也可以使用components注册多个子组件
    
    // 努尔哈赤
    // ↓
    // 康熙
    // ↓
    // 雍正，胤祥
    // ↓
    // 乾隆
    
    const ql = {
      template:"#ql",
      data(){
        return {
          title:"乾隆"
        }
      }
    }
    
    const yx = {
      template:"#yx",
      data(){
        return {
          title:"胤祥"
        }
      }
    }
    
    const yz = {
      template:"#yz",
      data(){
        return {
          title:"雍正"
        }
      },
      components:{
        Child:ql
      }
    }
    
    const kx = {
      template:"#kx",
      data(){
        return {
          title:"康熙"
        }
      },
      components:{
        Child1:yz,
        Child2:yx
      }
    }
    
    
    
    new Vue({
      el:"#app",
      data:{
        title:"努尔哈赤"
      },
      components:{
        Child:kx
      }
    })
    
    
  </script>
</html>
